// src/APP.vue

<template>
<div id="computed-basics">
  <p>姓：{{ firstName }}</p>
  <p>名：{{ lastName }}</p>
  <p>姓名：{{ fullName }}</p>
</div>
</template>

<script lang="ts">
export default{
  name: 'APP',
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        const names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
}
</script>